<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/compound.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<style type="text/css">
			#wrapper {
				width: 1207px;
				height: 760px;
				margin: 0px auto;
			}
			
			#wrapper a {
				text-decoration: none;
			}
			
			#wrapper input {
				outline: medium;
				border: 1px solid #CCCCCC;
			}
			
			#header {
				width: 1000px;
				/*height: 80px;*/
				margin: 0px auto;
				border-bottom: 3px solid #791A46;
			}
			#header img{
				height: 70px;
			}
			#content {
				width: 1000px;
				height: 500px;
				border: 1px solid;
				margin: 0px auto;
				margin-top: 20px;
				margin-bottom: 10px;
				background-image: url(img/myimg/login,register/c3beb31783b23ef48210e8950a40c69c.jpg);
			}
			#form{
				width: 370px;
				height: 420px;
				border: 4px solid #DCDDDD;
				margin-top: 20px;
				float: right;
				margin-right: 30px;
				background-color: #F7F8F8;
				position: relative;
			}
			#form form{
				width: 290px;
				height: 340px;
				/*border: 1px solid;*/
				margin: 0px auto;
				margin-top: 30px;
				
			}
			#form .p1{
				width: 290px;
				height: 40px;
				font-size: 16px;
				/*border: 1px solid;*/
			}
			#form .p2{
				width: 290px;
				height: 25px;
				line-height: 25px;
				text-align: right;
				
			}
			#form .clearall{
				color: #438600;
				position: absolute;
				top: 75px;
				left: 310px;
				display: none;
			}
			#form .p2 a{
				color: #AAAAAA;
			}
			#form .p2 a:hover{
				text-decoration: underline;
				color: #8CB91E;
			}
			#form input{
				width: 290px;
				height: 25px;
				outline: medium;
				font-size: 12px;
				
			}
			#dlzc{
				margin-top: 30px;
				height: 50px;
				border-bottom: 1px dashed #B5B5B6;
			}
			#dlzc input{
				width: 180px;
				height: 30px;
				color: white;
				font-size: 16px;
				cursor: pointer;
				font-weight: bold;
				vertical-align: middle;
				border-radius: 5px;
				background-image: url(img/myimg/login,register/login.png);
				background-position: -30px -6px;
			}
			#dlzc .zhuce{
				width: 80px;
				margin-left: 28px;
				color: #479202;
				background-image: url(img/myimg/login,register/login.png);
				background-position: -90px -150px;
			}
			#hezuo{
				width: 290px;
				height: 140px;
				/*border: 1px solid;*/
				line-height: 20px;
				font-size: 12px;
				color: #807E7E;
			}
			#hezuo p{
				color: #595757;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			#hezuo ul{
				width: 290px;
				height: 100px;
				/*border: 1px solid;*/
			}
			#hezuo li{
				height: 30px;
				float: left;
				vertical-align: middle;
				margin-right: 10px;
				
			}
			#hezuo a{
				color: #807E7E;
				
			}
			#hezuo a:hover{
				text-decoration: underline;
				color: #8CB91E;
			}
			#hezuo span{
				width: 20px;
				height: 20px;
				display: inline-block;
				margin-right: 2px;
				vertical-align: middle;
				background-image: url(img/myimg/login,register/login.png);
				background-repeat: no-repeat;
				background-position-x: -207px;
			}
			#hezuo .span1{
				background-position-y: -55px;
			}
			#hezuo .span2{
				background-position-y: -96px;
			}
			#hezuo .span3{
				background-position-y: -117px;
			}
			#hezuo .span4{
				background-position-y: -136px;
			}
			#hezuo .span5{
				background-position-y: -160px;
			}
			#hezuo .span6{
				background-position-y: -180px;
			}
			#hezuo .span7{
				background-position-y: -200px;
			}
			#hezuo .span8{
				background-position-y: -220px;
			}
			#hezuo .span9{
				background-position-y: -240px;
			}
			#footer-bottom{
				margin-top: 30px;
			}
			
		</style>
		
	
	</head>

	<body>
		<div id="wrapper" class="mt15">
			<div id="header" class="h80">
				<a href=""><img src="img/myimg/logo.png" /></a>
			</div>
			<div id="content">
				<div id="form">
					<form>
						<p class="p1">请登录Vin酒庄</p>
						<input type="text" id="name" placeholder="用户名"/><p class="clearall iconfont icon-shanchu"></p>
						<p class="p2"><a href="">忘记登录密码？</a></p>
						<input type="password" id="pwd" value="" placeholder="密码" />
						<div id="dlzc">
							<input type="button" name="" id="denglu" value="登录" /><input type="button" id="zhuce" value="注册" class="zhuce"/>
						</div>
						<div id="hezuo">
							<p>使用合作伙伴账号登录Vin酒庄</p>
							<ul>
								<li><span class="span1"></span><a href="">中粮</a></li>
								<li><span class="span2"></span><a href="">人人网</a></li>
								<li><span class="span3"></span><a href="">开心网</a></li>
								<li><span class="span4"></span><a href="">支付宝</a></li>
								<li><span class="span5"></span><a href="">新浪微博</a></li>
								<li><span class="span6"></span><a href="">百度</a></li>
								<li><span class="span7"></span><a href="">建行</a></li>
								<li><span class="span8"></span><a href="">什么值得买</a></li>
								<li><span class="span9"></span><a href="">中英人寿</a></li>
								
							</ul>
						</div>
					</form>
				</div>
			</div>
			<!--尾部-->
			<div id="footer-bottom">
				<p class="footer-p">
					<span><a href="javascript:;">关于我们</a></span>
					<span>|</span>
					<span><a href="javascript:;">免费条款</a></span>
					<span>|</span>
					<span><a href="javascript:;">中粮集团</a></span>
					<span>|</span>
					<span><a href="javascript:;">友情链接</a></span>
					<span>|</span>
					<span><a href="javascript:;">搜索热词</a></span>
					<span>|</span>
					<span><a href="javascript:;">实物购物券</a></span>
					<span>|</span>
					<a href="javascript:;">客服电话：400-005-5678</a>
				</p>
				<p>
					<span><a href="javascript:;"><img src="img/beian.png"/>京公网安备 11010102000458号</a></span>
					<span>|</span>
					<span>京ICP备 13003995号</span>
					<span>|</span>
					<span>营业执照（统一社会信用代码）91110000055590239L</span>
					<span>|</span>
					<span>食品经营许可证：JY11105020028185</span>
					<span>|</span>
					<span>Copyright&copy;2009-2017 Vin酒庄上购物 版权所有</span>
				</p>
			</div>
		</div>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$("#name").keyup(function(){
				$(".clearall").css("display","block");
			});
			$(".clearall").click(function(){
				$("#name").val("");
				if ($("#name").val("")) {
					$(".clearall").css("display","none");
				}
			});
			$("#zhuce").click(function(){
				location.href="register.html";
			});
			window.onload = function() {
				var APP_ID = 'isetgclNbinuVRR2cWjIAsc2-gzGzoHsz';
				var APP_KEY = 'iB12WgD1FTr8FGQNB0JSsrah';
				AV.init({
					appId: APP_ID,
					appKey: APP_KEY
				});
			}
			$("#denglu").on("click",function(){
				var name=$("#name").val();
				var pwd=$("#pwd").val();
				AV.User.logIn(name, pwd).then(function(loginedUser) {
					location.href="index.html";
				}, function(error) {
					console.log(error)
				});
				//rest API登录
//				$.ajax({
//							type: "post",
//							url: "https://api.leancloud.cn/1.1/login",
//							data: '{"username":"' + name + '","password":"' + pwd + '"}',
//							ContentType: "application/json",
//							headers: {
//								"X-LC-Id": "isetgclNbinuVRR2cWjIAsc2-gzGzoHsz",
//								"X-LC-Key": "iB12WgD1FTr8FGQNB0JSsrah"
//								//								"X-Avoscloud-Application-Id": "isetgclNbinuVRR2cWjIAsc2-gzGzoHsz",
//								//								"X-Avoscloud-Application-Key": "iB12WgD1FTr8FGQNB0JSsrah"
//							},
//							success: function(data) {
//								console.log("登陆成功");
//							},
//							error: function(data) {
//								console.log(data);
//							}
//						});      
			});
		});
	</script>
	</body>
	
</html>